<script setup>
import PlusIcon from '@/components/icons/PlusIcon.vue'
import { queryCategories, deleteCategoryById, changeCategoryStatus } from '@/service/category.js'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { ref } from 'vue'
import AddCategoryDialog from '@/pages/ProductCategory/components/AddCategoryDialog.vue'
import EditCategoryDialog from '@/pages/ProductCategory/components/EditCategoryDialog.vue'

const categoryList = ref([])

async function loadData() {
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '正在加载',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    const res = await queryCategories()
    categoryList.value = res.data
  } finally {
    loadingInstance.close()
  }
}

function editCategory(row) {
  pendingEditedRow.value = row
  showEditCategoryDialog.value = true
}
const showEditCategoryDialog = ref(false)
const pendingEditedRow = ref([])

function deleteCategory(row) {
  console.log(row)
  ElMessageBox.confirm('您确定要删除该分类吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await deleteCategoryById(row.id)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
      await loadData()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const showAddCategoryDialog = ref(false)
function handleSaveAction() {
  loadData()
  showAddCategoryDialog.value = false
}
function handleEditAction() {
  loadData()
  showEditCategoryDialog.value = false
}
async function onTapDisableCategory(id) {
  await changeCategoryStatus(id, 0)
  await loadData()
}
async function onTapEnableCategory(id) {
  await changeCategoryStatus(id, 1)
  await loadData()
}
loadData()
</script>

<template>
  <div class="product-category">
    <div class="product-category-title">商品分类</div>
    <el-button type="primary" style="margin-top: 18px; margin-bottom: 18px" @click="showAddCategoryDialog = true">
      <el-icon size="20">
        <PlusIcon />
      </el-icon>
      添加分类
    </el-button>
    <el-table
      :data="categoryList"
      style="width: 100%"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="id"
    >
      <el-table-column header-align="center" prop="name" label="分类名称"></el-table-column>
      <el-table-column header-align="center" align="center" prop="id" label="分类ID"></el-table-column>
      <el-table-column header-align="center" align="center" prop="status" label="状态">
        <template #default="scope">
          <el-popconfirm
            title="确定禁用该分类吗？"
            placement="right-start"
            confirm-button-text="禁用"
            cancel-button-text="取消"
            confirm-button-type="danger"
            @confirm="onTapDisableCategory(scope.row.id)"
          >
            <template #reference>
              <el-tag style="cursor: pointer" v-if="scope.row.status === 1" type="success">已启用</el-tag>
            </template>
          </el-popconfirm>
          <el-popconfirm
            title="确定启用该分类吗？"
            placement="right-start"
            confirm-button-text="启用"
            cancel-button-text="取消"
            cancel-button-type="danger"
            @confirm="onTapEnableCategory(scope.row.id)"
          >
            <template #reference>
              <el-tag style="cursor: pointer" v-if="scope.row.status === 0" type="danger">已禁用</el-tag>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="sort" label="排序"></el-table-column>
      <el-table-column header-align="center" align="center" prop="createTime" label="添加时间"></el-table-column>
      <el-table-column header-align="center" align="center" prop="createTime" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="editCategory(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteCategory(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <AddCategoryDialog
    @close-dialog="showAddCategoryDialog = false"
    :visible="showAddCategoryDialog"
    @finish-save-action="handleSaveAction"
  />
  <EditCategoryDialog
    :visible="showEditCategoryDialog"
    :row="pendingEditedRow"
    @close-dialog="showEditCategoryDialog = false"
    @finish-edit-action="handleEditAction"
  />
</template>

<style scoped lang="scss">
.product-category {
  width: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;

  .product-category-title {
    font-size: 14.5px;
  }
}
</style>
